<template>
	<transition name='slide-up'>
		<div class="setting-wrapper"
				 v-show='menuVisible && settingVisible === 1'>
			<div class="setting-theme">
				<div class="setting-theme-item"
						 v-for="(item, index) in themeList" :key="index"
						 @click="setTheme(index)">
					<div class="preview"
							 :style="{background:item.style.body.background}"
							 :class="{'add-border':item.style.body.background == '#fff',
							 					'selected':defaultTheme===item.name}"></div>
					<div class="text"
							 :class="{'selected':defaultTheme===item.name}">
						{{item.alias}}
					</div>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
	import { ebookMixin } from 'utils/mixin'
	import { removeCss } from 'utils/book'
	import { saveTheme } from 'utils/localStorage'

	export default {
		name: "", 
		mixins: [ebookMixin],
		data() {
			return {
				removeCss: this.removeTheme()
			}
		},
		methods: {
			setTheme(index) {
				const theme = this.themeList[index]
				this.setDefaultTheme(theme.name).then(() => {
					this.currentBook.rendition.themes.select(this.defaultTheme)
					this.initGlobalStyle()
					this.removeCss()
				})
				saveTheme(this.fileName, theme.name)
			},
			removeTheme() {
				let timer = null
				return function () {
					if (timer) {
						clearTimeout(timer)
					}
					timer = setTimeout(() => {
						switch (this.defaultTheme) {
							case 'Default':
			          removeCss(`ebook/theme/theme_eye2.css`)
			          removeCss(`ebook/theme/theme_night2.css`)
			          removeCss(`ebook/theme/theme_gold2.css`)
								break;
							case 'Eye':
			          removeCss(`ebook/theme/theme_default2.css`)
			          removeCss(`ebook/theme/theme_night2.css`)
			          removeCss(`ebook/theme/theme_gold2.css`)
								break;
							case 'Gold':
			          removeCss(`ebook/theme/theme_default2.css`)
			          removeCss(`ebook/theme/theme_eye2.css`)
			          removeCss(`ebook/theme/theme_night2.css`)
								break;
							case 'Night':
			          removeCss(`ebook/theme/theme_default2.css`)
			          removeCss(`ebook/theme/theme_eye2.css`)
			          removeCss(`ebook/theme/theme_gold2.css`)
								break;
							default:
								break;
						}
					}, 2000)
				}
			}
		}
	}
</script>

<style lang='scss' scoped>
@import 'assets/styles/global';	

.setting-wrapper {
	position: absolute;
	bottom: px2rem(44);
	z-index: 151;
	left: 0;
	width: 100%;
	height: px2rem(90);
	background: white;
	box-shadow: 0 px2rem(-8) px2rem(8) rgba(0, 0, 0, .15);
	.setting-theme {
		display: flex;
		height: 100%;
		.setting-theme-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: px2rem(5);
			box-sizing: border-box;
			.preview {
				flex: 1;
				&.add-border {
					border: px2rem(1) solid #ccc;
				}
				&.selected {
					box-shadow: 0 px2rem(4) px2rem(6) 0 rgba(0, 0, 0, .1)
				}
			}
			.text {
				flex: 0 0 px2rem(20);
				font-size: px2rem(14);
				color: #ccc;
				@include center;
				&.selected {
					color: #333;
				}
			}
		}
	}
}
</style>